import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Page1 from '../views/Page1.vue'
import Page2 from '../views/Page2.vue'
import Page3 from '../views/Page3.vue'
import Page4 from '../views/Page4.vue'
import Page5 from '../views/Page5.vue'
import Page6 from '../views/Page6.vue'

// 定义路由规则
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    // 可以重定向到第一个页面
    redirect: '/page1'
  },
  {
    path: '/page1',
    name: 'Page1',
    component: Page1,
    meta: {
      title: '页面 1' // 可以添加元信息，如页面标题等
    }
  },
  {
    path: '/page2',
    name: 'Page2',
    component: Page2,
    meta: {
      title: '页面 2'
    }
  },
  {
    path: '/page3',
    name: 'Page3',
    component: Page3,
    meta: {
      title: '页面 3'
    }
  },
  {
    path: '/page4',
    name: 'Page4',
    component: Page4,
    meta: {
      title: '页面 4'
    }
  },
  {
    path: '/page5',
    name: 'Page5',
    component: Page5,
    meta: {
      title: '页面 5'
    }
  },
  {
    path: '/page6',
    name: 'Page6',
    component: Page6,
    meta: {
      title: '页面 6'
    }
  },
  // 404 页面路由
  {
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    // 可以创建一个NotFound组件，这里暂时重定向到首页
    redirect: '/'
  }
]

// 创建路由实例
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL), // 使用HTML5 history模式
  routes
})

// 可以添加全局导航守卫
router.beforeEach((to, from, next) => {
  // 例如：设置页面标题
  if (to.meta.title) {
    document.title = to.meta.title as string
  }
  next()
})

export default router
